import { useLocation } from 'react-router-dom';
import png03 from '@/assets/images/common/btn_backwater_1.png';
import png01 from '@/assets/images/common/btn_deposit_1.png';
import png04 from '@/assets/images/common/btn_trans_1.png';
import png02 from '@/assets/images/common/btn_withdrawal_1.png';
import { Img } from '@/components';
import { useFormatText, useNavigation } from '@/hooks';

const list = [
  {
    tKey: 'text_4',
    icon: png01,
    link: '/deposit',
  },
  {
    tKey: 'text_5',
    icon: png02,
    link: '/withdraw',
  },
  {
    tKey: 'text_31',
    icon: png03,
    link: '/activity',
  },
  {
    tKey: 'text_30',
    icon: png04,
    link: '/bet/amount-trans',
  },
];

function QuickNav() {
  const { text } = useFormatText();
  const navigation = useNavigation();
  const { pathname } = useLocation();

  const toPage = (url: string) => {
    if (pathname !== url) {
      navigation(url);
    }
  };

  return (
    <div className='bg-color-25 border-t border-solid border-bar text-sm text-bar flex items-start'>
      {list.map((it) => (
        <div key={it.tKey} className='flex-1 flex flex-col justify-center items-center gap-1 py-2 border-r border-solid border-bar last:border-0 cursor-pointer' onClick={() => toPage(it.link)}>
          <Img boxClassName='w-7 h-7' src={it.icon} />
          <div>{text(it.tKey)}</div>
        </div>
      ))}
    </div>
  );
}

export default QuickNav;
